<template>
  <div class="menuManager">
    <div class="toolBar">
      <el-input
        placeholder="输入菜单名称"
        size="small"
        v-model="likeSearchWord"
        clearable
        @clear="getMenuList"
        style="width: 30%; margin-right: 10px"
      >
        <el-button @click="getMenuList" slot="append" icon="el-icon-search"
          >查询</el-button
        >
      </el-input>
      <el-button
        size="small"
        type="primary"
        @click="
          showAdd = true;
          isAdd = true;
        "
        >新增</el-button
      >
      <el-button size="small" type="danger" @click="subDel">删除选中</el-button>
    </div>
    <div class="content">
      <el-table
        size="small"
        border
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="menuName" label="菜单名称"></el-table-column>
        <el-table-column align="center" prop="menuIcon" label="菜单图标">
          <template slot-scope="scope">
            <i :class="scope.row.menuIcon" style="font-size: 20px"></i>
          </template>
        </el-table-column>
        <el-table-column prop="router" label="菜单路由"></el-table-column>
        <el-table-column prop="click" label="点击事件"></el-table-column>
        <!-- <el-table-column label="父级菜单">
          <template slot-scope="scope">
            <span v-if="scope.row.parent == '0'">/</span>
            <span v-if="scope.row.parent != '0'">{{scope.row.parentName}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="menuOrder" label="调整顺序">
          <template slot-scope="scope">
            <el-button
              size="mini"
              circle=""
              type="primary"
              @click="upOrder(scope.$index)"
              icon="el-icon-top"
            ></el-button>
            <el-button
              size="mini"
              circle=""
              @click="downOrder(scope.$index)"
              icon="el-icon-bottom"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="60">
          <template slot-scope="scope">
            <el-popover placement="right" width="100" trigger="click">
              <div
                @click="exeOption(scope.row, item.value)"
                class="option"
                v-for="(item, index) in options"
                :key="index"
              >
                <i :class="item.icon"></i> {{ item.label }}
              </div>
              <el-link slot="reference" class="el-icon-more"></el-link>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="新增菜单" :visible.sync="showAdd">
      <el-form size="small">
        <el-form-item label="菜单名称">
          <el-input
            placeholder="输入菜单名称"
            v-model="add.menuName"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单图标">
          <el-input
            placeholder="输入图标class（支持el-icon 和 fa）"
            v-model="add.menuIcon"
          ></el-input>
        </el-form-item>
        <el-form-item label="菜单路由">
          <el-input placeholder="输入菜单路由" v-model="add.router"></el-input>
        </el-form-item>
        <el-form-item label="点击事件">
          <el-input
            placeholder="输入点击事件方法"
            v-model="add.click"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="父级菜单(不选默认父级)">
          <el-select v-model="add.parent" clearable>
            <el-option
              v-for="(item, index) in menuList"
              :key="index"
              :label="item.menuName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button v-if="isAdd" type="primary" @click="subAdd"
            >确认</el-button
          >
          <el-button v-if="!isAdd" type="primary" @click="subUpdate"
            >修改</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="角色绑定" :visible.sync="showRole" width="30%">
      <el-form size="small">
        <el-form-item>
          <el-select v-model="bindRole" multiple style="width: 100%">
            <el-option
              v-for="(item, index) in roleList"
              :key="index"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="subBindRole">确认绑定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/js/api";
export default {
  name: "MenuManager",
  data() {
    return {
      tableData: [],
      pageNum: 1,
      pageSize: 10,
      likeSearchWord: "",
      options: [
        { label: "角色", value: "role", icon: "el-icon-view" },
        { label: "删除", value: "delete", icon: "el-icon-delete" },
        { label: "编辑", value: "edit", icon: "el-icon-edit" },
      ],
      menuList: [],
      isAdd: true,
      showAdd: false,
      showRole: false,
      add: {},
      roleList: [],
      bindRole: [],
      bindMenuId: null,
      selectedList: [],
    };
  },
  methods: {
    handleSelectionChange(data) {
      this.selectedList = [];
      data.forEach(element => {
          this.selectedList.push(element.id);
      });
    },
    subBindRole() {
      let param = {
        menuId: this.bindMenuId,
        roleIds: this.bindRole,
      };
      api.bindRoleForMenu(param).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.showRole = false;
      });
    },
    getRoleList() {
      api.getRoleList().then((res) => {
        this.roleList = res.data;
        this.getCurrentRoles();
        this.showRole = true;
      });
    },
    getCurrentRoles() {
      this.bindRole = [];
      api.currentRole({ menuId: this.bindMenuId }).then((res) => {
        res.data.forEach((element) => {
          this.bindRole.push(element.id);
        });
      });
    },
    subUpdate() {
      let tempList = [];
      // if(this.add.paernt==null||this.add.parent==''){
      //     this.add.parent = '0'
      // }
      tempList.push(this.add);
      api.updateMenu(tempList).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.showAdd = false;
        this.getMenuList();
      });
    },
    exeOption(row, type) {
      if (type == "edit") {
        this.add = row;
        this.isAdd = false;
        this.showAdd = true;
      }
      if (type == "role") {
        this.bindMenuId = row.id;
        this.getRoleList();
      }
      if (type == "delete") {
        this.selectedList = [];
        this.selectedList.push(row.id);
        this.subDel();
      }
    },
    subDel() {
      this.$confirm("此操作将永久删除该菜单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        api.deleteMenu(this.selectedList).then(res=>{
            this.$message({
                type: res.status?'success':'error',
                message: res.message
            })
            this.getMenuList();
        });
      });
    },
    subAdd() {
      if (this.add.menuName == null || this.add.menuName.trim() == "") {
        this.$message({
          type: "warning",
          message: "菜单名称不能为空",
        });
        return;
      }
      if (this.add.parent == null || this.add.parent == "") {
        this.add.parent = "0";
      }
      api.addMenu(this.add).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.getMenuList();
        this.showAdd = false;
      });
    },
    upOrder(index) {
      if (index == 0) {
        this.$message({
          type: "warning",
          message: "已经是顶部",
        });
        return;
      }
      let list = [];
      let menu1 = this.tableData[index];
      let menu2 = this.tableData[index - 1];
      menu1.menuOrder = menu1.menuOrder + 1;
      menu2.menuOrder = menu2.menuOrder - 1;
      list.push(menu1);
      list.push(menu2);
      api.updateMenu(list).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.getMenuList();
      });
    },
    downOrder(index) {
      if (index == this.tableData.length - 1) {
        this.$message({
          type: "warning",
          message: "已经是底部",
        });
        return;
      }
      let list = [];
      let menu1 = this.tableData[index];
      let menu2 = this.tableData[index + 1];
      menu1.menuOrder = menu1.menuOrder - 1;
      menu2.menuOrder = menu2.menuOrder + 1;
      list.push(menu1);
      list.push(menu2);
      api.updateMenu(list).then((res) => {
        this.$message({
          type: res.status ? "success" : "error",
          message: res.message,
        });
        this.getMenuList();
      });
    },
    getMenuList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        likeName: this.likeSearchWord,
      };
      api.getMenuList(param).then((res) => {
        this.tableData = res.data.records;
        // res.data.records.forEach((element,index) => {
        //     if(element.parent!='0'){
        //         console.log(element)
        //         let obj = this.menuList.find(item=>{
        //             return element.parent == item.id
        //         })
        //         console.log("父级菜单",obj)
        //         this.tableData[index].parentName = obj.menuName
        //     }
        // });
      });
    },
    // getAllMenuList() {
    //   api.getAllList().then((res) => {
    //     this.menuList = res.data;
    //     this.getMenuList();
    //   });
    // },
  },
  mounted() {
    this.getMenuList();
  },
};
</script>
<style scoped>
.menuManager {
  padding: 10px;
}
.toolBar {
  text-align: left;
  border-bottom: 1px solid gray;
  padding-bottom: 5px;
}
.option {
  font-size: 11pt;
  cursor: pointer;
  padding: 5px;
}
.option:hover {
  background-color: #409eff;
  color: white;
}
</style>